<script setup>
  import { ref, onMounted } from 'vue'
  import { useUsercodeStore } from '@/store/usercode.js'
  import { http } from '@/utils/http.js'
  // 在需要的页面或组件中引入uni模块
  // import uni from 'uni'

  // 创建 Store 实例
  // const userCodeStore = useUsercodeStore()
  // 像普通过 reactive 包装数据一样来访问
  // console.log(counterStore.count)
  // getters 可以可采用相同的方式来访问
  // console.log(counterStore.double)
  function ces() {
    console.log('dsf')
    uni.utils.toast('测试轻提示')
  }

  // 获取设备信息
  const systemInfo = ref(uni.getSystemInfoSync())

  const baseFormData = ref({
    name: '',
    age: '',
  })

  const check = ref(false)
  function ifAgree() {
    check.value = !check.value
  }
  const shebei = ref(process.env.VUE_APP_PLATFORM)

  // 小程序登录
  const logincode = ref()
  async function wxlogin() {
    if (systemInfo.value != 'mp-weixin') {
      const res = await wx.login()
      logincode.value = res.code
    }
  }
  const mobilecode = ref()
  function onGetPhoneNumber(e) {
    // 注意：目前该接口针对非个人开发者，且完成了认证的小程序开放（不包含海外主体）。需谨慎使用，若用户举报较多或被发现在不必要场景下使用，微信有权永久回收该小程序的该接口权限。
    const userCodeStore = useUsercodeStore()
    if (e.detail.errMsg == 'getPhoneNumber:ok') {
      if (!check.value) {
        uni.utils.toast('请选择是否同意用户协议')
        check.value = true
        return false
      }
      console.log(e)
      // 然后把code传到后端，并在开发者后台调用微信后台提供的 phonenumber.getPhoneNumber接口，消费code来换取用户手机号。
      mobilecode.value = e.detail.code
      userCodeStore.setUsercode({
        code: logincode.value,
        mobile: mobilecode.value,
      })
      // console.log(userCodeStore.usercode.isAddress)
    } else {
      console.log('用户点击了拒绝')
    }
  }

  // 暂不登录
  function goTo() {
    uni.reLaunch({
      url: '/pages/home/index',
    })
  }

  function goRule(id) {
    uni.navigateTo({
      url: `/homePage/agreement/index?id=${id}`,
    })
  }

  // app登录
  const loginType = ref(true)

  const mobilePhone = ref('')
  const mobileCode = ref('')
  const password = ref('')
  const second = ref(60)
  const timer = ref()
  const showSecond = ref(false)
  async function getCode() {
    if (!check.value) {
      uni.utils.toast('请选择是否同意用户协议')
      return
    }
    if (showSecond.value) {
      return
    }
    if (!mobilePhone.value) {
      uni.utils.toast('请输入手机号')
      return
    }
    const res = await http.request({
      url: '/api/alisms/sendSms',
      method: 'POST',
      data: {
        mobile: mobilePhone.value,
      },
    })
    if (res.st == 1) {
      showSecond.value = true
      timer.value = setInterval(() => {
        if (second.value == 0) {
          showSecond.value = false
          second.value = 60
          clearInterval(timer)
        }
        second.value--
      }, 1000)
      uni.utils.toast(res.msg)
    } else {
      uni.utils.toast(res.msg)
    }
  }

  function appLogin() {
    const userCodeStore = useUsercodeStore()
    if (!check.value) {
      uni.utils.toast('请选择是否同意用户协议')
      return
    }
    if (loginType.value) {
      if (!mobilePhone.value) {
        uni.utils.toast('请输入手机号')
        return
      }
      if (!mobileCode.value) {
        uni.utils.toast('请输入验证码')
        return
      }
      userCodeStore.appSetUsercode({
        code: mobileCode.value,
        mobile: mobilePhone.value,
      })
    } else {
      if (!mobilePhone.value) {
        uni.utils.toast('请输入手机号')
        return
      }
      if (!password.value) {
        uni.utils.toast('请输入密码')
        return
      }
      userCodeStore.appPassword({
        code: mobilePhone.value,
        password: password.value,
      })
    }
  }

  function agreement() {
    check.value = true
    agreementpopup.value.close('center')
  }

  function deAgreement() {
    agreementpopup.value.close('center')
  }

  const agreementpopup = ref()
  onMounted(() => {
    const userCodeStore = useUsercodeStore()
    if (!userCodeStore.usercode.token && shebei.value != 'mp-weixin') {
      agreementpopup.value.open('center')
    }
    if (shebei.value == 'mp-weixin') {
      wxlogin()
    }
    // console.log(res)
  })
</script>

<template>
  <view style="height: 97%">
    <!-- <view class="app" v-if="false"> -->
    <view class="app" v-if="shebei != 'mp-weixin'">
      <view class="up" v-if="loginType">
        <view class="title">
          <view class="top">
            <image
              style="width: 110rpx; height: 110rpx"
              src="../../static/logo.png"
              alt=""
            />
            <text>该你登场了</text>
          </view>
          <view class="down"> 新人登录即享注册大礼包 </view>
        </view>
        <view class="form">
          <view class="mobile">
            <view class="front"> +86 </view>
            <input
              class="uni-input"
              v-model="mobilePhone"
              placeholder="请输入手机号"
            />
          </view>
          <view class="code">
            <view class="front"> 验证码</view>
            <input
              class="uni-input"
              v-model="mobileCode"
              placeholder="请输入验证码"
            />
            <view class="mini-btn" @click="getCode">
              获取验证码<text v-if="showSecond">{{ second }}秒</text>
            </view>
          </view>
          <view class="button">
            <button class="login" type="primary" @click="appLogin">
              注册/登录
            </button>
            <!--  <view
              class=""
              style="
                margin-bottom: 10rpx;
                line-height: 50rpx;
                font-size: 24rpx;
                color: #7863ff;
              "
              @click="loginType = !loginType"
            >
              密码登录
            </view> -->
            <view class="nologin" @click="goTo"> 暂不登录~ </view>
            <view class="checked">
              <checkbox
                style="transform: scale(0.8)"
                value="cb"
                @click="ifAgree"
                :checked="check"
                activeBackgroundColor="#7863ff"
              />
              <view>
                我已阅读并同意
                <text style="color: #3d3d3d" @click="goRule(2)"
                  >《用户协议》</text
                >
                和
                <text style="color: #3d3d3d" @click="goRule(3)"
                  >《隐私政策》</text
                >
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="up" v-else>
        <view class="title">
          <view class="top">
            <image
              style="width: 110rpx; height: 110rpx"
              src="../../static/logo.png"
              alt=""
            />
            <text>该你登场了</text>
          </view>
          <view class="down"> 新人登录即享注册大礼包 </view>
        </view>
        <view class="form">
          <view class="mobile">
            <view class="front"> +86 </view>
            <input
              class="uni-input"
              v-model="mobilePhone"
              placeholder="请输入手机号"
            />
          </view>
          <view class="code">
            <view class="front"> 密码</view>
            <input
              class="uni-input"
              v-model="password"
              placeholder="请输入密码"
            />
          </view>
          <view class="button">
            <button class="login" type="primary" @click="appLogin">登录</button>
            <view
              class=""
              style="
                margin-bottom: 10rpx;
                line-height: 50rpx;
                font-size: 24rpx;
                color: #7863ff;
              "
              @click="loginType = !loginType"
            >
              注册
            </view>
            <view class="nologin" @click="goTo"> 暂不登录~ </view>
            <view class="checked">
              <checkbox
                style="transform: scale(0.8)"
                value="cb"
                @click="ifAgree"
                :checked="check"
                activeBackgroundColor="#FFE60F"
                color="#3d3d3d"
              />
              <view>
                我已阅读并同意
                <text style="color: #3d3d3d" @click="goRule(2)"
                  >《用户协议》</text
                >
                和
                <text style="color: #3d3d3d" @click="goRule(3)"
                  >《隐私政策》</text
                >
              </view>
            </view>
          </view>
        </view>
      </view>
      <!-- <view class="bottom">
				<view class="other"> ------其他登录方式------ </view>
				<image
					style="width: 110rpx; height: 110rpx"
					src="../../static/weixin.png"
					alt=""
				/>
			</view> -->
    </view>
    <view class="applet" v-else>
      <image
        style="width: 214rpx; height: 214rpx"
        src="../../static/logo.png"
        alt=""
      />

      <button
        class="login"
        type="primary"
        open-type="getPhoneNumber"
        @getphonenumber="onGetPhoneNumber"
      >
        手机号快捷登录
      </button>
      <view class="nologin" @click="goTo"> 暂不登录~ </view>

      <view class="checked">
        <checkbox
          style="transform: scale(0.8)"
          value="cb"
          @click="ifAgree"
          :checked="check"
          activeBackgroundColor="#FFE60F"
          color="#3d3d3d"
        />
        <view>
          我已阅读并同意
          <text style="color: #3d3d3d; font-weight: 600" @click="goRule(2)"
            >《用户协议》</text
          >
          和
          <text style="color: #3d3d3d; font-weight: 600" @click="goRule(3)"
            >《隐私政策》</text
          ></view
        >
      </view>
    </view>

    <!-- 协议弹出层 -->
    <uni-popup ref="agreementpopup" type="center" :is-mask-click="false">
      <view class="agreementpopup-content">
        <view class="agreementpopup-content-title"> 用户协议和隐私政策 </view>
        <view class="agreementpopup-content-text">
          请你无比审慎阅读、充分理解“用户协议”和“隐私政策”各条款，包括但不限于：为了更好的向你提供服务，我们需要收集你的设备标识、操作日志等信息用于分析、优化应用性能。
        </view>
        <view
          class="agreementpopup-content-text"
          style="margin-bottom: 10rpx; margin-top: 15rpx"
        >
          你可阅读<text style="color: #2d2495" @click="goRule(2)"
            >《用户协议》</text
          >和<text style="color: #2d2495" @click="goRule(3)">《隐私政策》</text
          >了解详细信息。如果你同意，请点击下面按钮开始接受我们的服务。
        </view>
        <view class="button" style="color: #f26e53" @click="agreement">
          同意并接受
        </view>
        <view class="button" style="color: #9c9c9c" @click="deAgreement">
          暂不同意
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<style lang="scss" scoped>
  .app {
    height: 100%;
    // display: flex;
    // flex-direction: column;
    padding: 20rpx;
    .up {
      height: 75%;
      .title {
        margin: 80rpx 0 188rpx 64rpx;
        display: flex;
        flex-direction: column;
        .top {
          display: flex;
          align-items: center;
          text {
            height: 30rpx;
            font-size: 50rpx;
            font-weight: bold;
          }
        }
        .down {
          margin: 14rpx 0 0 20rpx;
          font-size: 24rpx;
          color: #898989;
        }
      }
      .form {
        .mobile {
          display: flex;
          padding-bottom: 54rpx;
          margin-bottom: 50rpx;
          border-bottom: 2rpx solid #f5f5f5;
          .front {
            width: 100rpx;
            margin-right: 44rpx;
            font-size: 30rpx;
            font-weight: bold;
          }
        }
        .code {
          display: flex;
          padding-bottom: 54rpx;
          margin-bottom: 64rpx;
          border-bottom: 2rpx solid #f5f5f5;
          .front {
            width: 100rpx;
            margin-right: 44rpx;
            font-size: 30rpx;
            font-weight: bold;
          }
          .mini-btn {
            border: none;
            font-size: 13px;
            color: #898989;
          }
        }
        .button {
          display: flex;
          flex-direction: column;
          align-items: center;
          .login {
            width: 100%;
            height: 86rpx;
            margin-bottom: 30rpx;
            border-radius: 43rpx;
            background-color: #ffe60f;
          }
          .checked {
            display: flex;
            align-items: center;

            ::v-deep uni-checkbox .uni-checkbox-input {
              border-radius: 50% !important;
            }
            view {
              font-size: 24rpx;
              color: #898989;
            }

            ::v-deep checkbox .wx-checkbox-input {
              border-radius: 50% !important;
              color: #ffffff !important;
            }

            ::v-deep checkbox .wx-checkbox-input.wx-checkbox-input-checked {
              color: #fff;
              background: #ffe60f;
            }

            ::v-deep .wx-checkbox-input.wx-checkbox-input-checked {
              border-color: #ffe60f !important;
            }
          }
        }
      }
    }
    .bottom {
      display: flex;
      flex-direction: column;
      align-items: center;
      .other {
        margin-bottom: 20rpx;
        font-size: 22rpx;
        color: #8a8a8a;
      }
      image {
        width: 74rpx;
        height: 74rpx;
      }
    }
    .nologin {
      font-size: 28rpx;
      line-height: 60rpx;
      color: #aaaaaa;
    }
  }

  .applet {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20rpx;
    image {
      margin: 152rpx 0;
    }
    .login {
      height: 124rpx;
      width: 80%;
      border-radius: 62rpx;
      background-color: $all-color;
      line-height: 124rpx;
      color: #3d3d3d;
      font-weight: 600;
    }
    .nologin {
      font-size: 28rpx;
      line-height: 60rpx;
      color: #aaaaaa;
    }
    .checked {
      display: flex;
      align-items: center;
      ::v-deep uni-checkbox .uni-checkbox-input {
        border-radius: 50% !important;
      }
      view {
        font-size: 24rpx;
        color: #898989;
      }
      ::v-deep checkbox .wx-checkbox-input {
        border-radius: 50% !important;
        color: #ffffff !important;
      }

      ::v-deep checkbox .wx-checkbox-input.wx-checkbox-input-checked {
        color: #3d3d3d;
        background: #ffe60f;
      }

      ::v-deep .wx-checkbox-input.wx-checkbox-input-checked {
        border-color: #ffe60f !important;
      }
    }
  }
  .agreementpopup-content {
    width: 680rpx;
    height: 600rpx;
    padding: 40rpx;
    box-sizing: border-box;
    border-radius: 40rpx;
    background-color: #fff;
    .agreementpopup-content-title {
      margin-bottom: 40rpx;
      font-size: 30rpx;
      font-weight: 700;
      text-align: center;
    }
    .agreementpopup-content-text {
      text-indent: 2em;
      font-size: 25rpx;
    }
    .button {
      text-align: center;
      line-height: 100rpx;
      font-size: 28rpx;
    }
  }
</style>
